<template>
  <el-container>
    <basic-crud :option="option" businessUrl="/obj/enumTypeController">
      <template #menu="{ row }">
        <el-button link type="primary" icon="Connection" @click="handleOpenDialog(row)">关联子级</el-button>
      </template>
    </basic-crud>
    <basic-dialog-table v-model="visible" :title="title" :option="emnuSonOption" businessUrl="/obj/enumDataController"
      apiGetListUrl="/obj/enumDataController/listHasChildren" :apiListParams="{ enumTypeId: formData.enumTypeId }"
      :apiAddParams="formData" hideFooter ref="basicDialogTableRef">
      <template #menu="{ row }">
        <el-button link type="primary" icon="Plus" @click="handleOpenSonDialog(row)">新增子级</el-button>
      </template>
    </basic-dialog-table>
  </el-container>

</template>

<script setup>
import { reactive } from 'vue'

const option = {
  searchSpan: 8,
  menuWidth: 260,
  column: [
    {
      label: '编号',
      prop: 'code',
      search: true,
      overHidden: true,
      searchSpan: 8,
      width: 140,
      sortable: true,
      rules: [{ required: true, message: '编号不能为空', trigger: 'blur' }],
    },
    {
      label: '名称',
      prop: 'name',
      width: 130,
      search: true,
      searchSpan: 8,
      sortable: true,
      overHidden: true,
      rules: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
    },
    {
      label: '类路径',
      prop: 'classFullName',
      search: true,
      width: 150,
      overHidden: true,
      sortable: true,
      searchSpan: 8,
      clearable: true,
    },
    {
      label: '系统定义',
      width: 100,
      prop: 'customizeFlag',
      display: false,
      type: 'select',
      value: 'false',
      dicData: [
        {
          label: '是',
          value: 'false',
        },
        {
          label: '否',
          value: 'true',
        },
      ],
    },
    {
      label: '状态',
      prop: 'status',
      type: 'select',
      statusTag: true,
      width: 80,
      search: true,
      sortable: true,
      searchSpan: 8,
      display: false,
      dicData: [
        {
          label: '启用',
          value: 'Enabled',
        },
        {
          label: '停用',
          value: 'Disabled',
        },
      ],
    },
    {
      label: '描述',
      prop: 'des',
      overHidden: true,
      sortable: true,
      type: 'textarea',
      span: 24,
    },
  ],
}

const useEnumSon = () => {
  const visible = ref(false)
  const title = ref('')
  const basicDialogTableRef = ref()
  const formData = reactive({ enumTypeId: undefined, parentId: undefined })
  const emnuSonOption = {
    height: 400,
    labelWidth: 100,
    menuWidth: 260,
    defaultExpandAll: true,
    column: [
      {
        label: '值',
        prop: 'code',
        width: 120,
        sortable: true,
        rules: [{ required: true, message: '值不能为空', trigger: 'blur' }],
      },
      {
        label: '显示内容',
        prop: 'name',
        width: 150,
        sortable: true,
        rules: [{ required: true, message: '显示不能为空', trigger: 'blur' }],
      },
      {
        label: '描述',
        prop: 'des',
        overHidden: true,
        span: 24,
        clearable: true,
        type: 'textarea',
      },
    ],
  }

  const handleOpenDialog = (row) => {
    title.value = row.name
    formData.enumTypeId = row.id
    visible.value = true
  }

  const handleOpenSonDialog = (row) => {
    formData.parentId = row.id
    basicDialogTableRef.value.basicCrudRef.crudRef.rowAdd()
  }

  // 关闭之前
  const beforeClose = (done) => {
    formData.parentId = undefined
    done()
  }

  return {
    title,
    visible,
    formData,
    emnuSonOption,
    basicDialogTableRef,
    beforeClose,
    handleOpenDialog,
    handleOpenSonDialog,
  }
}

const {
  title,
  visible,
  formData,
  emnuSonOption,
  basicDialogTableRef,
  beforeClose,
  handleOpenDialog,
  handleOpenSonDialog,
} = useEnumSon()
</script>

<style lang="scss" scoped></style>
